<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Node对象</title>
    <!--
    Node:节点对象,其他五个的父对象
      * 特点:所有的dom对象都可以被认为是一个节点
      * 方法:   appendChild():向节点的子节点列表的结尾添加新的子节点.
                removeChild():删除(并返回)当前节点的指定子节点
                replaceChild():用新节点替换一个子节点.
    -->
    <style>
        div{
            border: 1px solid red;
        }

        #aa{
            width: 200px;
            height: 200px;
        }

        #tt{
            width: 100px;
            height: 100px;

        }



    </style>
</head>
<body>

  <div id="aa">
      <div id="dd">div2</div>
      div1
  </div>
<a href="javascript:void(0);" id="bb">删除子节点</a>
  <a href="javascript:void(0);" id="mm">添加子节点</a>
 <!-- <input type="button" id="bb" value="删除子节点">-->

  <script>
      //获取超链接
      var cc=document.getElementById("bb");
      //绑定单击事件
      cc.onclick=function () {
      var ee=document.getElementById("aa");
      var ff=document.getElementById("dd");
      ee.removeChild(ff);
      }


      //获取超链接
      var nn=document.getElementById("mm");
      //绑定单击事件
      nn.onclick=function () {
          var kk=document.getElementById("aa");
          //给kk添加子节点
          //创建div子节点
          var oo=document.createElement("div");
         oo.setAttribute("id","tt")
          kk.appendChild(oo);
      }

      /*
      超链接功能:
         1:可以被点击:样式
         2:点击后跳转到href指定的url

       需求: 保留一功能,去掉二功能
       实现:  href=:javascript:void(0);" */
  </script>



</body>
</html>